<template>
  <wu-dialog ref="addDia" :title="title" @onconfirm="onDialogConfirm">
    <el-form :model="form" :label-width="120" label-position="top">
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="form.name" placeholder="品牌名称" clearable />
      </el-form-item>
      <el-form-item label="品牌地区">
        <el-select v-model="form.region" placeholder="品牌地区">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
  </wu-dialog>
</template>

<script setup lang="ts">
import WuDialog from '@/components/WuDialog.vue'

defineProps<{
  title: string
}>()
// import '@/components/W'
const form = reactive({
  name: '',
  region: ''
})
const addDia = ref<typeof WuDialog>()
// 确认
const onDialogConfirm = () => {
  console.log('弹窗确定时', form)
}
// 打开弹窗
const openDia = () => {
  addDia.value?.openDia()
}
defineExpose({
  openDia,
  closeDia: addDia.value?.closeDia
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  align-items: center;
  line-height: 20px;
  text-align: right;
}
</style>
